<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>系统常态化运行评分系统</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <style>
        .expand.pear-btn:hover {
            color: currentColor;
            background: none;
        }

        .expand.pear-btn {
            border: 1px solid rgba(255, 255, 255, 0)
        }
    </style>

</head>

<body class="pear-container">
    <div id="divCardHeader" class="layui-card-header" style="height: 70px; background-color: #fff;padding: 0;">
        <div id="systemName" class="layui-font-black layui-font-22" style="height: 34px;text-align: center;"></div>
        <div id="systemWeight" class=" layui-font-gray layui-font-16" style="text-align: center;">
            (指标满分<span id="totalScore"></span> 分,权重 <span id="weight"></span>,总得分计入 <span id="totalScoreCount"></span>
            分)
        </div>
    </div>
    <div class="layui-card">

        <div class="layui-card-body">
            <table id="user-table" lay-filter="user-table"></table>
            <script type="text/html" id="ID-table-demo-css-user">
                <div id="zbDetailsListContent">
                    {{# if(d.zbDetailsList && d.zbDetailsList.length) { }}
                        {{# for(var i = 0; i < d.zbDetailsList.length; i++) { }} <!-- 使用 for 循环 -->
                        <div class="custom-class-container " style="align-items: center;">
                            <span class="detial " style="color: blue;">
                                {{ d.zbDetailsList[i].zbDetails }}
                            </span>
                            <button type="button" class="pear-btn pear-btn-primary pear-btn-xs" id="ID-upload-demo-files-action"
                            onclick="editZbDetails({ id: '{{ d.id }}', index: '{{ i }}' })"
                            style="font-size: 12px !important;"
                            >编辑</button>
                          </div>
                           
                        {{# } }} <!-- 关闭 for 循环 -->
                    {{# } else { }}
                        <div class="custom-class">无详情</div> <!-- 默认内容 -->
                    {{# } }}
                </div>
            </script>

        </div>
    </div>
    </div>
    </div>

    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script src="../../scripts/utils/request.js"></script>
    <script src="../../scripts/utils/auth.js"></script>
    <script src="../../scripts/utils/tinymceUtils.js"></script>
    <script>
        var detailContent = {}
        function getData() {
            return detailContent;
        }
        var $, table, form, drawer, popup, notice, laydate
        layui.use(['table', 'form', 'jquery', 'drawer', 'popup', 'notice', 'laydate', 'tinymce', 'util', 'layer'], function () {
            table = layui.table;
            form = layui.form;
            $ = layui.jquery;
            drawer = layui.drawer;
            popup = layui.popup;
            notice = layui.notice;
            laydate = layui.laydate;
            tinymce = layui.tinymce;
            layer = layui.layer;
            util = layui.util;


            var id = getUrlParams('id');
            var systemName = getUrlParams('systemName')
            var totalScore = getUrlParams('totalScore')
            var weight = getUrlParams('weight')
            $('#systemName').text(systemName);
            $('#totalScore').text(totalScore);
            $('#weight').text(weight);
            $('#totalScoreCount').text(totalScore * weight);
            laydate.render({
                elem: '#checkTime'
            });
            var tabData = []
            table.render({
                id: "user-table",
                elem: '#user-table',
                url: baseURL + '/api/configZb/listSystemZbDetails?systemId=' + id,
                method: 'post',
                contentType: 'application/json',
                page: false,
                loading: true,
                headers: {
                    token: localStorage.getItem("token")
                },
                height: 'full-35',
                lineStyle: 'min-height: 95px;',
                cols: [[
                    { type: 'numbers', title: '序号', width: 60,},
                    { field: 'content', width: 120, title: '考核项', },
                    { field: 'zbContent', width: 260, title: '指标内容', },
                    { field: 'pfMethod', width: 260, title: '评分方法', },
                    { field: 'zbTotalScore', width: 100, title: '指标满分',align:'center' },
                    { field: 'zbDetailsList', minWidth: 200, title: '指标量化', templet: '#ID-table-demo-css-user' },
                ]],
                skin: 'grid',
                done: function (res, curr, count) {
                    validToken(res);
                    if (res.code === 0) {
                        tabData = res.data
                    }
                }
            });


            /**
             * 每行的按钮
             */
            table.on('tool(user-table)', function (obj) {
                if (obj.event === 'pf') {

                }
            });

            /**
             * 新增操作
             */
            table.on('toolbar(user-table)', function (obj) {
                if (obj.event === 'addPf') {
                    window.addPf();
                } else if (obj.event === 'refresh') {
                    window.refresh();
                }
            });

            form.on('submit(user-query)', function (data) {
                table.reload('user-table', {
                    where: data.field,
                })
                return false;
            });


            /**
             * 新增/修改评分
             */
            form.on('submit(lay-user-add)', function (data) {
                console.log(data, '');
                let reqData = data.field;
                reqData.id = id;
                reqData.mineState = getCheckBoxValues();
                reqData.remark = remark.getContent();
                postAjax('/api/mine/modify', reqData, function (response) {

                }, null);
            });
            function findDetailByIdAndIndex(array, id, index) {
                // 根据 id 查找第一层数据
                const item = array.find(item => item.id === id);

                if (item) {
                    // 获取 zbDetailsList
                    const zbDetailsList = item.zbDetailsList;

                    // 根据 index 查找具体数据
                    if (index >= 0 && index < zbDetailsList.length) {
                        return zbDetailsList[index]; // 返回对应索引的详情
                    } else {
                        return null; // 索引无效
                    }
                } else {
                    return null; // 找不到对应的 id
                }
            }
            window.editZbDetails = function (obj) {
                detailContent = findDetailByIdAndIndex(tabData,obj.id,obj.index)
                console.log(detailContent);
                layer.open({
                    type: 2,
                    offset: 'r',
                    anim: 'slideLeft', // 从右往左
                    area: ['80%', '100%'],
                    shade: 0.1,
                    shadeClose: true,
                    id: 'ID-demo-layer-direction-r',
                    content: './systemDetailEdit.html'
                });
            },
                window.refresh = function (param) {
                    table.reload('user-table');
                };
        })
    </script>
</body>
<style>
    /* 容器样式 */
    .custom-class-container {
        display: flex;
        /* 使用 Flexbox 布局 */
        align-items: center;
        /* 垂直居中 */
        justify-content: space-between;
        /* 子元素左右分布，第一个在左，最后一个在右 */
        margin-bottom: 5px;
        /* 外边距 */
        border-bottom: 1px solid #ccc;
        /* 底部边框 */
    }

    /* 第一个 span 样式，确保内容换行 */
    .detial {
        word-wrap: break-word;
        /* 内容在到达边缘时换行 */
        overflow-wrap: anywhere;
        /* 允许在任意字符处断行 */
        /* 可以设置一个最大宽度，比如 100px 或其他值 */
        min-width: 180px;
        margin-right: 4px;
    }

    /* 所有 span 和 button 的样式，这里使用了统一的类名 */
    .custom-class span,
    #ID-upload-demo-files-action {
        margin-left: 5px;
        /* 左边距，除了第一个 span */
    }

    /* 按钮样式，靠右 */
    #ID-upload-demo-files-action {
        margin-left: auto;
        /* 自动左边距，将按钮推到右侧 */
    }
      /*设置数据表表头字体*/
      .layui-table th{
            /*表头内容居中显示*/
            text-align: center;
        }
</style>

</html>